<template>
	<div class="HomeClassify">
		<el-menu class="el-menu-vertical-demo"
			:collapse="true"  v-for="(item,i) in list" >
			<el-submenu index="1">
				<template slot="title">
					{{item.name}}
				</template>
				<el-menu-item-group v-for="(item2) in item.children">
					   <el-menu-item :router='true'>{{item2.name}}</el-menu-item>
				</el-menu-item-group>
			</el-submenu>
		</el-menu>
	</div>
</template>

<script>
	export default {
		name: "HomeClassify",
		data() {
			return {
				HotItems: [],
				list: []
			}
		},
		methods: {
		
		},
		created() {
			this.$axios.get('/api/public/type/findAll2').then((res) => {
				if (res.status == 200) {
					this.HotItems = res.data.data;
					this.HotItems.forEach((item, i) => {
						if (item.pid === 0) {
							this.list.push({
								...item,
								children: [],
							})
						}
					})
					this.HotItems.forEach((item1) => {
						this.list.forEach((item2) => {
							if (item1.pid === item2.id) {
								console.log(item1.pid);
								item2.children.push({
									...item1
								})
							}
						})
					})
				}
			}).catch((error) => {
				console.log(error);
			})
		},

	}
</script>

<style scoped>
	.HomeClassify {
		width: 25%;
		
		/* background-color: #0ff; */
	}

	
	.el-menu-vertical-demo{
		width: 100%;
		height: 16%;
	}

 .el-menu--popup-right-start{
	 display: flex;
 }
 ..el-menu--popup{
	 display: flex;
 }
</style>